<template>
	<u-popup :value="value" mode="bottom" border-radius="50" blur="20" :closeable="false" :mask-close-able="false">
		<view class="content">
			<view class="title">基础信息设置</view>
			<view class="sub-title">获取您的昵称、头像主要用于向您提供具有辨识度的用户中心界面</view>
			<view class="avatar-box">
				<view class="button-shadow">
					<button class="avatar-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar" @click="chooseAvatar">
						<view v-if="userInfo.avatar" class="avatar-image">
							<image class="image" :src="userInfo.avatar" mode="aspectFill"></image>
						</view>
						<view v-else class="avatar-empty">
							<text>头像</text>
						</view>
						<view class="avatar-icon">
							<u-icon name="camera-fill" size="30"></u-icon>
						</view>
					</button>
				</view>
			</view>

			<view class="input-box">
				<view class="label">昵称</view>
				<input class="input" type="nickname" v-model="userInfo.nickname" placeholder="请输入昵称" placeholder-style="color: #8e8e8e;" />
			</view>

			<view class="input-box" v-if="needInviteCode && !inviteCodeDisable">
				<view class="label">邀请码</view>
				<input class="input" type="text" v-model="userInfo.inviteCode" placeholder="请输入邀请码" placeholder-style="color: #8e8e8e;" :disabled="inviteCodeDisable" />
			</view>

			<view class="submit-btn">
				<u-button type="success" :disabled="!userInfo.avatar || !userInfo.nickname" @click.stop="submitUserInfo">保 存</u-button>
				<view style="margin-top: 50rpx">
					<u-button type="default" @click.stop="close">暂不设置</u-button>
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	options: {
		// 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
		virtualHost: true
	},
	props: {
		value: {
			type: Boolean,
			default: false
		},
		needInviteCode: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			inviteCodeDisable: false,
			userInfo: {
				avatar: "",
				nickname: "",
				inviteCode: ""
			}
		};
	},
	mounted() {
		uni.$on("uAvatarCropper", this.updateAvatar);
	},
	destroy() {
		uni.$off("uAvatarCropper", this.updateAvatar);
	},
	methods: {
		// 监听 - 弹窗打开
		onOpen(){
			let vk = uni.vk;
			this.userInfo.avatar = vk.getVuex("$user.userInfo.avatar") || "";
			this.userInfo.nickname = vk.getVuex("$user.userInfo.nickname") || "";
			if (this.needInviteCode) {
				this.userInfo.inviteCode = vk.getVuex("$user.inviteCode") || "";
				// 如果已有邀请码，则不可以修改
				this.inviteCodeDisable = vk.getVuex("$user.inviteCode") ? true : false;
			}
		},
		// 监听 - 弹窗关闭
		onClose(){

		},
		onChooseAvatar(e) {
			this.userInfo.avatar = e.detail.avatarUrl;
		},
		chooseAvatar() {
			// #ifndef MP-WEIXIN
			this.$u.route({
				url: "/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper",
				params: {
					// 输出图片宽度，高等于宽，单位px
					destWidth: 300,
					// 裁剪框宽度，高等于宽，单位px
					rectWidth: 200,
					// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					fileType: "jpg"
				}
			});
			// #endif
		},
		// 修改头像
		updateAvatar(avatar) {
			let that = this;
			if (avatar.indexOf(";base64,") > -1) {
				// 上传到云存储
				vk.pubfn.base64ToFile({
					base64: avatar,
					success: file => {
						this.userInfo.avatar = file.path;
					}
				});
			} else {
				this.userInfo.avatar = avatar;
			}
		},

		submitUserInfo() {
			if (!this.userInfo.avatar || !this.userInfo.nickname) {
				vk.toast("请选择头像和输入昵称");
				return;
			}
			if (this.userInfo.avatar.indexOf("http://tmp") == 0 || this.userInfo.avatar.indexOf("blob:") == 0) {
				vk.callFunctionUtil.uploadFile({
					filePath: this.userInfo.avatar,
					fileType: "image",
					success: res => {
						// 修改头像和昵称
						this.userInfo.avatar = res.url;
						this.updateUser();
					}
				});
			} else {
				this.updateUser();
			}
		},
		async updateUser() {
			if (this.userInfo.inviteCode) {
				await this.bindInviteCode();
			}
			// 修改昵称头像
			await vk.userCenter.updateUser({
				title: "保存中...",
				data: {
					avatar: this.userInfo.avatar,
					nickname: this.userInfo.nickname
				}
			});
			// 成功后关闭弹窗
			this.close();
			this.$emit("update", this.userInfo);
		},
		close() {
			this.$emit("input", false);
			this.$emit("close");
		},
		// 绑定邀请码（代表接受别人的邀请注册）
		bindInviteCode() {
			return vk.callFunction({
				url: "client/salesman.pub_addUserLocking",
				title: "绑定中...",
				data: {
					invite_code: this.userInfo.inviteCode
				}
			});
		}
	},
	watch: {
		value(val){
			if (val) {
				this.onOpen();
			} else {
				this.onClose();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	width: 100%;
	background-color: #ffffff;
	padding: 40rpx;
	padding-bottom: 40rpx;
	padding-bottom: calc(constant(safe-area-inset-bottom) + 40rpx);
	padding-bottom: calc(env(safe-area-inset-bottom) + 40rpx);
	.title {
		font-size: 34rpx;
		font-weight: bold;
	}
	.sub-title {
		font-size: 26rpx;
		color: #aaaaaa;
		margin-top: 16rpx;
		padding-bottom: 30rpx;
	}
	.avatar-box {
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.button-shadow {
			border: 8rpx solid rgba(255, 255, 255, 0.05);
			box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
			border-radius: 50%;
		}

		.avatar-button {
			position: relative;
			width: 160rpx;
			height: 160rpx;
			border-radius: 50%;
			overflow: visible;
			background-image: repeating-linear-gradient(45deg, #e4e9ec, #f8f7f8);
			color: #ffffff;
			background-color: transparent;
			padding: 0;
			margin: 0;
			font-size: inherit;
			line-height: inherit;
			border: none;
			&::after {
				border: none;
			}
		}
		.avatar-image,
		.avatar-empty {
			width: 100%;
			height: 100%;
			border-radius: inherit;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #000;
			.image {
				width: 100%;
				height: 100%;
				border-radius: inherit;
			}
		}
		.avatar-icon {
			position: absolute;
			right: -10rpx;
			bottom: -6rpx;
			width: 60rpx;
			height: 60rpx;
			background-color: #1d2541;
			color: #ffffff;
			border-radius: 50%;
			border: 6rpx solid #ffffff;
			line-height: 1;
			font-size: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.input-box {
		margin-top: 56rpx;
		width: 100%;
		padding: 26rpx 20rpx;
		border-radius: 10rpx;
		background-color: #f8f7f8;
		display: flex;
		align-items: center;
		.label{
			margin-right: 20rpx;
			width: 100rpx;
			text-align: right;
		}
		.input {
			flex: 1;
			color: #080808;
		}
	}

	.submit-btn {
		margin-top: 60rpx;
	}
}
</style>
